<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <title>{$data.name}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*取消点击效果*/
        div {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        ul, li {
            list-style: none
        }

        .tabClick {
            background: #f8fbff;
            overflow: hidden
        }

        .tabClick li {
            height: 40px;
            line-height: 40px;
            width: 25%;
            float: left;
            text-align: center;
            color: #999999;
            font-size: 14px;
        }

        .tabClick li.active {
            color: #333333;
            transition: 0.1s;
            font-weight: bold;
            font-size: 16px;
        }

        .tabCon {
            overflow: hidden;
            background: #fff;
        }

        .tabBox {
            position: relative;
            background: #fff;
        }

        .tabList {
            background: #fff;
            word-break: break-all;
            width: 100%;
            color: #D3D3D3;
            font-family: "Arial Black";
        }

        .lineBorder {
            height: 5px;
            overflow: hidden;
            background: #f8fbff;
        }

        .lineDiv {
            background: #3485ff;
            height: 4px;
            width: 16px;
            margin-left: 10%;
            border-radius: 2px;
        }

        /* 顶部 */
        .header {
            background: #f8fbff;
            padding: 20px;
        }

        /* 里面内容 */
        .header_inner {
            background: #fff;
            padding: 20px;
            border-radius: 5px;

            -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
            -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
        }

        /*图片*/
        .header_title_img {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            /*background: #00f;*/
            padding-top: 5px;
        }

        /*标题*/
        .header_title {
            text-align: center;
            line-height: 18px;
            padding-top: 3px;
            float: left;
            font-size: 18px;
            font-weight: bold;
            color: #333333;
        }

        /* 描述 */
        .header_des {
            margin-top: 40px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #8A8C97;
            line-height: 28px;
        }


        /* 底部内容 */
        .card {
            background: #fff;
            padding: 20px;
        }

        /*图片*/
        .card_title_img {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            /*background: #00f;*/
            padding-top: 5px;
        }

        /*标题*/
        .card_title_div {
            text-align: center;
            line-height: 14px;
            padding-top: 3px;
            float: left;
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            /*background: #0ff;*/
            margin-top: 5px;
        }

        .location {
            width: 7rem;
            height: 0.65rem;
            background: #FFFFFF;
            box-shadow: 0px 1px 4px 0px #e5eff6;
            border-radius: 0.1rem;
            margin: 0 auto 0.1rem;
            position: relative;
        }

        .location .icon {
            display: inline-block;
            width: 0.65rem;
            height: 0.65rem;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://oss.goddessxzns.com/test/map/city_score/location.png");
            position: absolute;
        }

        .location .title1 {
            font-size: 0.24rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 0.17rem;
            position: absolute;
            left: 0.8rem;
            bottom: 0.23rem;
        }

        .location .title2 {
            font-size: 0.24rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #3485FF;
            line-height: 0.17rem;
            position: absolute;
            right: 0.2rem;
            top: 0.23rem;
        }
        .location .arrow{
            width: 0.12rem;
            height: 0.18rem;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("https://oss.goddessxzns.com/test/map/city_score/arrow.png");
        }
        .header_inner{
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px #E5EFF6;
            border-radius: 10px;
        }
    </style>
<body>

<!-- 代码部分begin -->
<div class="wrap" id="wrap">

    <div class="header">
        <div class="header_inner">
            <img class="header_title_img" src={$data.icon}>
            <div class="header_title">{$data.name}</div>
            <div class="header_des">{$data.des}</div>
        </div>

    </div>
    {if condition="$gid!=18"}
    <ul class="tabClick">
        <li class="active">{$data.name}Ⅰ</li>
        <li>{$data.name}Ⅱ</li>
        <li>{$data.name}Ⅲ</li>
        <li>{$data.name}Ⅳ</li>
    </ul>

    <div class="lineBorder">
        <div class="lineDiv"><!--移动的div--></div>
    </div>
    {/if}
    <div class="tabCon">
        <div class="tabBox">

            {if condition="$gid!=18"}

            {foreach $data['sub_lines'] as $k => $v}
            <div class="tabList">
                <div class="location">
                    <p class="icon"></p>
                    {switch name="$k"}
                    {case value="1"}<span class="title1">当前{$data.name}Ⅰ</span>{/case}
                    {case value="2"}<span class="title1">当前{$data.name}Ⅱ</span>{/case}
                    {case value="3"}<span class="title1">当前{$data.name}Ⅲ</span>{/case}
                    {case value="4"}<span class="title1">当前{$data.name}Ⅳ</span>{/case}
                    {/switch}
                    <span class="title2" onclick="viewLocation({$gid},{$k})">查看当前{$data.name} <span class="arrow"></span></span>
                </div>
                <div class="card">
                    <div class="header_title">
                        <img class="card_title_img" src={$lines_icon.mean}>
                        <div class="card_title_div">意义</div>
                    </div>
                    <div class="header_des" style="white-space: pre-wrap;">{$v.mean}</div>
                </div>
                <div class="card">
                    <div class="header_title">
                        <img class="card_title_img" src={$lines_icon.use}>
                        <div class="card_title_div">使用方法</div>
                    </div>
                    <div class="header_des" style="">{$v.use}</div>
                </div>

            </div>
            {/foreach}

            {/if}

            {if condition="$gid==18"}
            <div class="tabList">
                {foreach $data['sub_fate_cities'] as $k => $v}
                <div class="card">
                    <div class="header_title">
                        <img class="card_title_img" src={$v.icon}>
                        <div class="card_title_div">{$v.name}</div>
                    </div>
                    <div class="header_des">{$v.des}</div>
                </div>
                {/foreach}
            </div>

            {/if}
        </div>
    </div>
</div>
<script src="https://oss.goddessxzns.com/static/live/js/jquery-1.11.3.min.js"></script>

{if condition="$gid!=18"}
<script charset="utf-8">
    var header = JSON.parse(`{$header}`);
    window.onload = function () {
        var windowWidth = document.body.clientWidth; //window 宽度;
        var wrap = document.getElementById('wrap');
        var tabClick = wrap.querySelectorAll('.tabClick')[0];
        var tabLi = tabClick.getElementsByTagName('li');

        var tabBox = wrap.querySelectorAll('.tabBox')[0];
        var tabList = tabBox.querySelectorAll('.tabList');

        var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
        var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];

        var tar = 0;
        var endX = 0;
        var dist = 0;
        resizeWindow();
        $(window).resize(function () {
            resizeWindow();
        })

        function resizeWindow() {
            if ($(window).width() >= 750) {
                $('html').css({'font-size': '32px'});
            } else {
                var remPx = 100 / 7.5;
                $('html').css({'font-size': remPx + 'vw'});
            }
        }
        tabBox.style.overflow = 'hidden';
        tabBox.style.position = 'relative';
        tabBox.style.width = windowWidth * tabList.length + "px";

        for (var i = 0; i < tabLi.length; i++) {
            tabList[i].style.width = windowWidth + "px";
            tabList[i].style.float = 'left';
            tabList[i].style.float = 'left';
            tabList[i].style.paddingTop = '30px';
            tabList[i].style.margin = '0';
            tabList[i].style.verticalAlign = 'top';
            tabList[i].style.display = 'table-cell';
        }

        for (var i = 0; i < tabLi.length; i++) {
            tabLi[i].start = i;
            tabLi[i].onclick = function () {
                var star = this.start;
                for (var i = 0; i < tabLi.length; i++) {
                    tabLi[i].className = '';
                }
                ;
                tabLi[star].className = 'active';
                init.lineAnme(lineDiv, windowWidth / tabLi.length * star)
                init.translate(tabBox, windowWidth, star);
                endX = -star * windowWidth;
            }
        }

        function OnTab(star) {
            if (star < 0) {
                star = 0;
            } else if (star >= tabLi.length) {
                star = tabLi.length - 1
            }
            for (var i = 0; i < tabLi.length; i++) {
                tabLi[i].className = '';
            }
            ;

            tabLi[star].className = 'active';
            init.translate(tabBox, windowWidth, star);
            endX = -star * windowWidth;
        };

        tabBox.addEventListener('touchstart', chstart, false);
        // tabBox.addEventListener('touchmove', chmove, false);
        tabBox.addEventListener('touchend', chend, false);

        //按下
        function chstart(ev) {
            ev.preventDefault;
            var touch = ev.touches[0];
            tar = touch.pageX;
            tabBox.style.webkitTransition = 'all 0s ease-in-out';
            tabBox.style.transition = 'all 0s ease-in-out';
        };

        //滑动
        function chmove(ev) {
            var stars = wrap.querySelector('.active').start;
            ev.preventDefault;
            var touch = ev.touches[0];
            var distance = touch.pageX - tar;
            dist = distance;
            init.touchs(tabBox, windowWidth, tar, distance, endX);
            init.lineAnme(lineDiv, -dist / tabLi.length - endX / 4);
        };

        //离开
        function chend(ev) {
            var str = tabBox.style.transform;
            var strs = JSON.stringify(str.split(",", 1));
            endX = Number(strs.substr(14, strs.length - 18));

            if (endX > 0) {
                init.back(tabBox, windowWidth, tar, 0, 0, 0.3);
                endX = 0
            } else if (endX < -windowWidth * tabList.length + windowWidth) {
                endX = -windowWidth * tabList.length + windowWidth
                init.back(tabBox, windowWidth, tar, 0, endX, 0.3);
            } else if (dist < -windowWidth / 3) {
                OnTab(tabClick.querySelector('.active').start + 1);
                init.back(tabBox, windowWidth, tar, 0, endX, 0.3);
            } else if (dist > windowWidth / 3) {
                OnTab(tabClick.querySelector('.active').start - 1);
            } else {
                OnTab(tabClick.querySelector('.active').start);
            }
            var stars = wrap.querySelector('.active').start;
            init.lineAnme(lineDiv, stars * windowWidth / 4);

        };
    };

    var init = {
        translate: function (obj, windowWidth, star) {
            obj.style.webkitTransform = 'translate3d(' + -star * windowWidth + 'px,0,0)';
            obj.style.transform = 'translate3d(' + -star * windowWidth + ',0,0)px';
            obj.style.webkitTransition = 'all 0.3s ease-in-out';
            obj.style.transition = 'all 0.3s ease-in-out';
        },
        touchs: function (obj, windowWidth, tar, distance, endX) {
            obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)';
            obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px';
        },
        lineAnme: function (obj, stance) {
            obj.style.webkitTransform = 'translate3d(' + stance + 'px,0,0)';
            obj.style.transform = 'translate3d(' + stance + 'px,0,0)';
            obj.style.webkitTransition = 'all 0.1s ease-in-out';
            obj.style.transition = 'all 0.1s ease-in-out';
        },
        back: function (obj, windowWidth, tar, distance, endX, time) {
            obj.style.webkitTransform = 'translate3d(' + (distance + endX) + 'px,0,0)';
            obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px';
            obj.style.webkitTransition = 'all ' + time + 's ease-in-out';
            obj.style.transition = 'all ' + time + 's ease-in-out';
        },
    }

    function viewLocation(gid, lineNum) {
        //todo 调用客户端方法查看定位
        console.log('check_map_lines?gid=' + gid + '&num=' + lineNum + '&latitude=30')
        commonJsToNative('current', 'check_map_lines?gid=' + gid + '&num=' + lineNum + '&latitude=30')
    }

    /**
     * 调用客户端本地跳转
     * @param target
     * @param link
     */
    function commonJsToNative(target, link) {
        if (!target) return;
        console.log('commonJsToNative', 'target:', target, 'link:', link, 'app-type:', header['app-type']);
        switch (header['app-type']) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                });
                break;
            case 'android':
                androidwebview.commonJsToNative(target, link)
                break;
            default:
                if (target === 'link') {
                    window.location.href = link;
                } else {
                    console.log('跳转不支持', 'target:', target, 'link:', link);
                }
        }
    }

</script>
{/if}


{include file="../apps/web/view/public/sensors.html" /}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d09c76e42b7d952920cd58fc4c715cf0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

<!-- 代码部分end -->

</body>
</html>
